<template>
    <div>
        <div>
            <a-form
                    :form="form"
            >
                <a-form-item
                        label="立方米"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 12 }"
                >
                    <a-radio-group @change="立方体单位改变" v-model="立方米单位">
                        <a-radio-button value="天">立方米/天</a-radio-button>
                        <a-radio-button value="小时">立方米/小时</a-radio-button>
                        <a-radio-button value="秒">立方米/秒</a-radio-button>
                    </a-radio-group>


                </a-form-item>

            </a-form>

            <a-form :form="form">

                <a-form-item
                        label="设计水量Q"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 12 }"
                >
                    <a-input v-model="form.设计水量Q"></a-input>
                </a-form-item>

                <a-form-item
                        label="进水BOD(mg/L)"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 12 }"
                >
                    <a-input v-model="form.进水BOD"></a-input>
                </a-form-item>

                <a-form-item
                        label="出水BOD(mg/L)"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 12 }"
                >
                    <a-input v-model="form.出水BOD"></a-input>
                </a-form-item>

                <a-form-item
                        label="a'"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 12 }"
                >
                    <a-input v-model="form.aBie"></a-input>
                </a-form-item>

                <a-form-item
                        label="b'"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 12 }"
                >
                    <a-input v-model="form.bBie"></a-input>
                </a-form-item>

                <a-form-item
                        label="α"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 12 }"
                >
                    <a-input v-model="form.alpha"></a-input>
                </a-form-item>

                <a-form-item
                        label="β"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 12 }"
                >
                    <a-input v-model="form.beta"></a-input>
                </a-form-item>


                <a-form-item
                        label="曝气器空气释放点离水面的高度H（m）"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 12 }"
                >
                    <a-input v-model="form.曝气器空气释放点离水面的高度H"></a-input>
                </a-form-item>

                <a-form-item
                        label="曝气池内水温T"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 12 }"
                >
                    <a-input v-model="form.曝气池内水温T"></a-input>
                </a-form-item>

                <a-form-item
                        label="Fw污泥负荷（kgBOD/kgMLSS d）"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 12 }"
                >
                    <a-input v-model="form.Fw污泥负荷"></a-input>
                </a-form-item>

                <a-form-item
                        label="Nw污泥浓度（g/L）"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 12 }"
                >
                    <a-input v-model="form.Nw污泥浓度"></a-input>
                </a-form-item>

            </a-form>

            <div>
                <p>
                    <span>需氧量:</span>
                    <span>{{需氧量}}</span>
                </p>
            </div>

        </div>
    </div>
</template>

<script>
const 设计水量单位Map = {
    "天": 1,
    "小时": 24,
    "秒": 24 * 3600
}

export default {
    data() {
        return {
            form: {
                设计水量Q: 1800,
                进水BOD: 100,
                出水BOD: 20,
                aBie: 0.50,
                bBie: 0.18,
                alpha: 0.85,
                beta: 0.92,
                曝气器空气释放点离水面的高度H: 4.3,
                曝气池内水温T: 35,
                Fw污泥负荷: 0.1,
                Nw污泥浓度: 3.2,
            },
            立方米单位: "天"

        }
    },

    methods: {
        立方体单位改变(e) {
            this.立方米单位 = e
        }

    },

    computed: {
        需氧量() {
            const form = Object.keys(this.form)
                .reduce((acc, curr) => {
                    return {...acc, [curr]: Number.parseFloat(this.form[curr])}
                }, {})

            console.log("form.设计水量Q", form.设计水量Q / 设计水量单位Map[this.立方米单位])
            console.log("form.进水BOD", form.进水BOD)
            console.log("form.出水BOD", form.出水BOD)
            console.log("form.Fw污泥负荷", form.Fw污泥负荷)
            console.log("form.Nw污泥浓度", form.Nw污泥浓度)

            const x = (form.设计水量Q / 设计水量单位Map[this.立方米单位])
                * (form.进水BOD - form.出水BOD)
                / 1000
                / form.Fw污泥负荷
                / form.Nw污泥浓度

            console.log("final", x)
            return x
        }
    }
}
</script>

<style>
    /* CSS */
</style>
